<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {

        }
        header, nav, article, aside, main, footer {
            display: block;
        }
        header {
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background-color: yellowgreen;
        }
        nav {
            width: 1000px;
            height: 60px;
            margin: 10px auto 0;
            background-color: yellowgreen;
        }
        main {
            width: 1000px;
            height: 400px;
            margin: 10px auto 0;
            background-color: yellowgreen;
        }
        main aside {
            float: left;
            width: 150px;
            height: 400px;
            margin-right: 10px;
            background-color: pink;
        }
        main article {
            float: left;
            width: 840px;
            height: 400px;
            background-color: pink;
        }
        footer {
            width: 1000px;
            height: 100px;
            margin: 10px auto 0;
            background: yellowgreen;
        }
        

    </style>
</head>
<body>
    <!-- 
        html5
        超文本语言的第五次重大修改
        在移动设备上支持多媒体
        新特性：语义标签 本地储存 设备建通 连接特性 多媒体特性 三维 图形特效特性 性能与继承 css3

        优势 提高可用性 更好的语义化标签  多媒体  替代dlash和silverlight
        网站抓取索引 对SEO很友好
        大量用于app和游戏 可移植性好

        列表 IE9以下 有一定概率不兼容

        前景  移动开发  游戏开发

        广义html5
        html5+css3+javascript 技术综合

        div对于搜索来说是没有语义效果的
        html5新增语义化标签
        header 头部标签
        nav  导航标签
        main 主题标签
            article 独立的内容的标签  section 区段标签
            aside 侧边栏标签
        footer 尾部标签

        注意事项
        语义化标准主要针对搜索引擎
        新标签页面中可以使用多次 eg. section
        IE9中需要把这些元素转换为块级元素 IE8以下不支持
        移动端更喜欢使用这些标签        
    -->

    <header>头部</header>
    <nav>导航</nav>
    <main>
        <aside>侧边栏</aside>
        <article>主体内容</article>
    </main>
    <footer>版权所有 公司名</footer>
</body>
</html>